import React, { Component } from 'react'

export default class App extends Component {
  constructor() {
    super()

    this.state = {
      friends: [
        { name: 'ACE', age: 22 },
        { name: 'SaBo', age: 20 },
        { name: 'Luffy', age: 18 }
      ]
    }
  }

  //scu优化   或者使用 继承PureComponent 自带浅比较 
  shouldComponentUpdate(nextProps, nextState) {
    if(nextState.friends !== this.state.friends) {
      return true
    }

    return false
  }

  render() {
    const { friends } = this.state

    return (
      <div>
        <ul>
          {
            friends.map(item => {
              return (
                <li key={item.name}>{item.name}</li>
              )
            })
          }
        </ul>

        <button onClick={e => this.addNewData() }>添加数据</button>
      </div>
    )
  }

  addNewData() {
    //1. 这样是可以改变 但是要做上面scu优化 就走不通了 因为这里改变的friends和上面nextState.friends 引用的都是同一个引用地址 所以是一直保持一致的
    const data = { name: 'tom', age: 30 }
    // this.state.friends.push(data)
    // this.setState({
    //   friends: this.state.friends
    // })

    //推荐做法  这里做一个浅拷贝 就又开辟了一个内存地址 上面做scu时 nextState.friends拿的是这里的newArr 进行对比 
    const newArr = [...this.state.friends]
    newArr.push(data)
    this.setState({
      friends: newArr
    })
  }
}
